<template>
  <view class="landscape-container">
    <view class="login-out" @click="handleBack">
      <image src="./imgs/icon-login-out.png" class="login-out-img"></image>
      <view class="login-out-text">退出</view>
    </view>
    <view class="share-btn" @click="handleShare">
      <view class="login-out-text">分享</view>
    </view>
    <view class="sider-tab">
      <view
        class="tab-item"
        :class="{ cur: curTab == index }"
        v-for="(item, index) in tabData"
        @click="handleChageTab(index)"
        >{{ item }}</view
      >
    </view>
    <view class="sider-bar">
      <view class="sider-box" v-if="!isToggle && curTab == 0">
        <view class="content-html" v-html="stepContent"></view>
      </view>
      <view class="sider-box" v-if="!isToggle && curTab == 1">
        <view class="sider-column">
          <view class="column-header">
            <view class="header-title">实验参数</view>
            <view class="header-btn" v-if="isAll1" @click="isAll1 = false">
              <view class="btn-text">收起</view>
              <image src="./imgs/icon-arrow-up.png" class="icon-arrow"></image>
            </view>
            <view class="header-btn" v-else @click="isAll1 = true">
              <view class="btn-text">展开</view>
              <image
                src="./imgs/icon-arrow-down.png"
                class="icon-arrow"
              ></image>
            </view>
          </view>
          <view class="column-body" v-if="isAll1">
            <view class="result-grid">
              <view
                class="grid-item"
                v-for="(item, index) in paramers"
                :key="index"
              >
                <view class="item-value">{{ item.value }}</view>
                <view class="item-title">{{ item.name }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="sider-column">
          <view class="column-header">
            <view class="header-title">实验现象</view>
            <view class="header-btn" v-if="isAll2" @click="isAll2 = false">
              <view class="btn-text">收起</view>
              <image src="./imgs/icon-arrow-up.png" class="icon-arrow"></image>
            </view>
            <view class="header-btn" v-else @click="isAll2 = true">
              <view class="btn-text">展开</view>
              <image
                src="./imgs/icon-arrow-down.png"
                class="icon-arrow"
              ></image>
            </view>
          </view>
          <view class="column-body" v-if="isAll2">
            <view class="result-img">
              <view class="img-bg">
                <view
                  class="dot"
                  :style="{ top: dotRef.y + 'rpx', left: dotRef.x + 'rpx' }"
                ></view>
              </view>
            </view>
          </view>
        </view>
        <view class="sider-column">
          <view class="column-header">
            <view class="header-title">系统参数与结果</view>
            <view class="header-btn" v-if="isAll3" @click="isAll3 = false">
              <view class="btn-text">收起</view>
              <image src="./imgs/icon-arrow-up.png" class="icon-arrow"></image>
            </view>
            <view class="header-btn" v-else @click="isAll3 = true">
              <view class="btn-text">展开</view>
              <image
                src="./imgs/icon-arrow-down.png"
                class="icon-arrow"
              ></image>
            </view>
          </view>
          <view class="column-body" v-if="isAll3">
            <view
              class="silder-item"
              v-for="(item, index) in controlList"
              :key="index"
            >
              <view class="silder-hd">
                <view class="silder-hd-title">{{ item.name }}</view>
                <view class="silder-hd-value">{{ item.value }}</view>
              </view>
              <view class="silder-bd">
                <slider
                  :value="item.value"
                  :max="item.max"
                  :min="item.min"
                  @change="handleSilderChange($event, item.type)"
                  :step="item.step"
                />
              </view>
            </view>
          </view>
        </view>
        <view class="sider-button" @click="handleStart"> 开始测量 </view>
      </view>
      <view
        class="sider-bar-tip"
        :class="{ toggle: isToggle }"
        @click="handleToggle"
      >
        <view class="bar-tip-text">实 验 步 骤</view>
        <view class="bar-tip-arrow"></view>
      </view>
    </view>
    <view class="control-bar">
      <view
        class="control-bar-btn top"
        @click="handleChangeDirection('top')"
      ></view>
      <view
        class="control-bar-btn right"
        @click="handleChangeDirection('right')"
      ></view>
      <view
        class="control-bar-btn bottom"
        @click="handleChangeDirection('bottom')"
      ></view>
      <view
        class="control-bar-btn left"
        @click="handleChangeDirection('left')"
      ></view>
    </view>
    <iframe
      :src="url"
      class="iframe"
      ref="iframeRef"
      @load="sendChangeStatus"
      @error="handleError"
    ></iframe>
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <text class="text">{{ shareUrl }}</text>
        <view class="popup-btn" @click="handleCopy">复制链接</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isToggle: false,
      curTab: 0,
      isAll1: true,
      isAll2: true,
      isAll3: true,
      teacher_experiment_id: "",
      paramers: [
        
      ],
      dotRef: { x: 0, y: 0 },
      controlList: [
        {
          name: "波长(nm)",
          value: 550,
          max: 1000,
          min: 0,
          step: 10,
          type: 0,
        },
        {
          name: "狭缝宽度(mm)",
          value: 0.5,
          max: 1,
          min: 0,
          step: 0.1,
          type: 1,
        },
        {
          name: "光栅角度(°)",
          value: 15,
          max: 180,
          min: 0,
          step: 1,
          type: 2,
        },
      ],
      tabData: ["实验步骤", "实验参数"],
      url: `https://lib.fantasy-lab.com/3d/index.html?ver=${Math.floor(
        Math.random() * 10000
      )}&expid=Optics_T03_001`,
      datas: {},
      id: "",
      stepContent:"",
      saveData: null,
      shareUrl: "",
    };
  },

  methods: {
    handleBack() {
      uni.navigateBack();
    },
    handleCopy() {
      uni.setClipboardData({
        data: this.shareUrl,
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "success",
          });
        },
      });
    },
    handleStart() {
      //判断operate的x和y是否大于20，小于280，如果不是则不执行以下操作
      if (
        this.dotRef.x >= 20 &&
        this.dotRef.y >= 20 &&
        this.dotRef.x <= 28 &&
        this.dotRef.y <= 28
      ) {
        if (this.$refs.iframeRef.contentWindow) {
          let datas = {
            type: "startMeasurement",
            data: true,
          };
          this.$refs.iframeRef.contentWindow.postMessage(datas, "*");
        }
        this.paramers = [];
        this.time1 = setTimeout(() => {
          let params = [
            {
              name: "折射角1(°)",
              value: 60,
            },
            {
              name: "厚度1(nm)",
              value: 131.4,
            },
          ];
          this.paramers = [...this.paramers, ...params];
        }, 10000);
        this.time2 = setTimeout(() => {
          let params = [
            {
              name: "折射角2(°)",
              value: 50,
            },
            {
              name: "厚度2(nm)",
              value: 132.2,
            },
          ];
          this.paramers = [...this.paramers, ...params];
        }, 20000);
        this.time3 = setTimeout(() => {
          let params = [
            {
              name: "折射角3(°)",
              value: 40,
            },
            {
              name: "厚度(nm)",
              value: 130.6,
            },
          ];
          this.paramers = [...this.paramers, ...params];
        }, 30000);
      } else {
        uni.showToast({
          title: "需要校准后才能测量",
          icon: "error",
        });
      }
    },
    handleChangeDirection(type) {
      switch (type) {
        case "left":
          this.dotRef.x += -1;
          if (this.dotRef.x <= 0) {
            this.dotRef.x = 0;
          }
          break;
        case "right":
          this.dotRef.x += 1;
          if (this.dotRef.x >= 48) {
            this.dotRef.x = 48;
          }
          break;
        case "top":
          this.dotRef.y += -1;
          if (this.dotRef.y <= 0) {
            this.dotRef.y = 0;
          }
          break;
        case "bottom":
          this.dotRef.y += 1;
          if (this.dotRef.y >= 48) {
            this.dotRef.y = 48;
          }
          break;
      }
      if (this.$refs.iframeRef.contentWindow) {
        const datas = {
          type: "changeOperate",
          data: type,
        };
        this.$refs.iframeRef.contentWindow.postMessage(datas, "*");
      }
    },
    handleChageTab(index) {
      this.curTab = index;
    },
    handleToggle() {
      this.isToggle = !this.isToggle;
    },
    handleError(e) {
      console.log(e, "webview加载失败");
    },
    sendChangeStatus() {
      if (this.$refs.iframeRef.contentWindow) {
        const datas = {
          type: "changeStatus",
          data: "open",
        };
        this.$refs.iframeRef.contentWindow.postMessage(datas, "*");
      }
    },
    handleSilderChange(e, type) {
      const index = this.controlList.findIndex((item) => item.type === type);
      this.controlList[index].value = e.detail.value;
    },
    async getData() {
      const res = await this.API.ExperimentFetchModel({
        experiment_id: this.id,

      });
      this.datas = res;
      this.stepContent = res.steps
      await this.getStartData();
    },
    handleKeyDown(e) {
      console.log("监听", e);
    },
    async getStartData() {
      let params = {
        experiment_id: this.id,
        homework_id: null,
        name: this.datas.name,
        source_id: null,
      };
      const res = await this.API.TeacherExperimentCreateTeacherExperiment(
        params
      );
      this.teacher_experiment_id = res.teacher_experiment_id;
    },
    async handleShare() {
      if (this.$refs.iframeRef?.contentWindow) {
        const datas = {
          type: "handleSave",
          data: this.teacher_experiment_id,
        };
        this.$refs.iframeRef.contentWindow.postMessage(datas, "*");
      }
    },
    
    async handleSaveData() {
      const params = {
        the_experiment_id: this.teacher_experiment_id,
        operation_json: JSON.stringify(this.saveData),
      };
      await this.API.TeacherExperimentCreateStudentExperimentStep(params);
      this.shareUrl =
        location.href.replace("experiment", "share") +
        "&role=3&expuid=" +
        this.teacher_experiment_id;
      this.$refs.popup.open("center");
    },
  },
  async onLoad(options) {
    //尝试使用 API 锁定横屏 (部分浏览器支持)
    if (screen.orientation && screen.orientation.lock) {
      screen.orientation.lock("landscape").catch((e) => {
        console.warn("锁定横屏失败，使用 CSS 方案", e);
      });
    }
    this.id = options.id;
    await this.getData();
    window.addEventListener("message", async (e) => {
      console.log("接收iframe的消息：", e.data);
      if (e.data.type === "sendShowBootom") {
        this.curTab = 1;
        this.isAll2 = true;
      }
       if (e.data.type == "sendSaveData") {
        console.log("接收iframe的消息：", e.data);
        this.saveData = e.data.data.opRecordList;
        this.handleSaveData();
      }
    });
  },
  onUnload() {
    //退出页面时尝试解锁屏幕方向
    if (screen.orientation && screen.orientation.unlock) {
      screen.orientation.unlock();
    }
    window.removeEventListener("message");
  },
};
</script>

<style lang="less" scoped>
/* 关键样式：强制横屏效果 */
@media (orientation: portrait) {
  .landscape-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vh; /* 使用屏幕高度作为宽度 */
    height: 100vw; /* 使用屏幕宽度作为高度 */
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
    .iframe {
      width: 100vh;
      height: 100vw;
      border: 0;
    }
  }
}

/* 横屏设备直接使用全屏 */
@media (orientation: landscape) {
  .landscape-container {
    width: 100vw;
    height: 100vh;
  }
}
/* 基础样式 */
.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  .text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 11rpx;
    color: #262626;
    line-height: 15rpx;
    text-align: center;
    font-style: normal;
    width: 400rpx;
    margin-bottom: 20rpx;
  }
  .popup-btn {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    width: 100rpx;
    height: 30rpx;
    background: #2776ff;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    line-height: 30rpx;
    font-size: 16rpx;
  }
}
.iframe {
  width: 100vw;
  height: 100vh;
  border: 0;
}
.share-btn {
  position: fixed;
  z-index: 99;
  top: 10rpx;
  right: 130rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30rpx;
  padding: 0 18rpx;
  background: #ffffff;
  border-radius: 7rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 11rpx;
  color: #262626;
  line-height: 15rpx;
  text-align: center;
  font-style: normal;
}
.login-out {
  position: fixed;
  z-index: 99;
  top: 10rpx;
  right: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30rpx;
  padding: 0 12rpx;
  background: #ffffff;
  border-radius: 7rpx;
  .login-out-img {
    width: 15rpx;
    height: 15rpx;
  }
  .login-out-text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 11rpx;
    color: #262626;
    line-height: 15rpx;
    text-align: center;
    font-style: normal;
  }
}
.sider-tab {
  width: 233rpx;
  background: #ffffff;
  border-radius: 7rpx;
  position: fixed;
  top: 10rpx;
  left: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tab-item {
    width: 116rpx;
    height: 30rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 11rpx;
    color: #595959;
    line-height: 30rpx;
    text-align: center;
    font-style: normal;
    border-radius: 7rpx;
    &.cur {
      background: #2776ff;
      color: #fff;
    }
  }
}
.sider-bar {
  position: fixed;
  z-index: 99;
  top: 48rpx;
  left: 10rpx;
  bottom: 10rpx;
  .sider-box {
    width: 233rpx;
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 7rpx;
    padding: 12rpx;

    .content-html {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 11rpx;
      color: #595959;
      line-height: 15rpx;
      text-align: left;
      font-style: normal;
    }
    .sider-column {
      padding-bottom: 12rpx;
      margin-bottom: 12rpx;
      border-bottom: 1rpx solid #e6ebf1;
      .column-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 11rpx;
          color: #262626;
          line-height: 15rpx;
          text-align: left;
          font-style: normal;
        }
        .header-btn {
          display: flex;
          align-items: center;
          .btn-text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 11rpx;
            color: #595959;
            line-height: 15rpx;
            text-align: left;
            font-style: normal;
          }
          .icon-arrow {
            width: 11rpx;
            height: 11rpx;
          }
        }
      }
      .column-body {
        .result-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(3, 45rpx);
          align-items: start;
          gap: 0;
          .grid-item {
            width: 100rpx;
            height: 45rpx;
            display: flex;
            align-self: start;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            .item-value {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 18rpx;
              color: #262626;
              line-height: 24rpx;
              text-align: center;
              font-style: normal;
            }
            .item-title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 11rpx;
              color: #595959;
              line-height: 15rpx;
              text-align: center;
              font-style: normal;
            }
          }
        }
        .result-img {
          padding: 12rpx;
          width: 211rpx;
          height: 211rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          .img-bg {
            width: 64rpx;
            height: 64rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            &::after {
              content: "";
              width: 24rpx;
              height: 24rpx;
              border-radius: 50%;
              background-color: #000;
            }
          }

          .dot {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background: #ff4d4f;
            position: absolute;
            top: 12rpx;
            left: 12rpx;
          }
        }
        .silder-item {
          margin-top: 10rpx;
          .silder-hd {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .silder-hd-title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 11rpx;
              color: #262626;
              line-height: 15rpx;
              text-align: right;
              font-style: normal;
            }
            .silder-hd-value {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 11rpx;
              color: #262626;
              line-height: 15rpx;
              text-align: center;
              font-style: normal;
            }
          }
          .silder-bd {
          }
        }
      }
    }
    .sider-button {
      width: 211rpx;
      height: 37rpx;
      background: #ffffff;
      border-radius: 4rpx;
      border: 1rpx solid #2776ff;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 13rpx;
      color: #2776ff;
      line-height: 37rpx;
      text-align: center;
      font-style: normal;
    }
  }
  .sider-bar-tip {
    position: absolute;
    top: 50%;
    right: -30rpx;
    transform: translateY(-50%);
    width: 30rpx;
    height: 87rpx;
    background: #ffffff;
    border-radius: 0rpx 7rpx 7rpx 0rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    &.toggle {
      border-radius: 7rpx;
      .bar-tip-arrow {
        transform: rotate(180deg);
      }
    }
    .bar-tip-text {
      width: 11rpx;
      height: 59rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 11rpx;
      color: #262626;
      line-height: 15rpx;
      text-align: left;
      font-style: normal;
    }
    .bar-tip-arrow {
      width: 15rpx;
      height: 15rpx;
      background-image: url("./imgs/icon-arrow-left.png");
      background-size: cover;
      transition: all 0.3s;
    }
  }
}
.control-bar {
  position: fixed;
  z-index: 99;
  bottom: 28rpx;
  right: 28rpx;
  .control-bar-btn {
    position: absolute;
    &.top {
      right: 41rpx;
      bottom: 63rpx;
      width: 37rpx;
      height: 55rpx;
      background: url(./imgs/control-top.png) no-repeat;
      background-size: 100% 100%;
    }
    &.right {
      right: 0;
      bottom: 41rpx;
      height: 37rpx;
      width: 55rpx;
      background: url(./imgs/control-right.png) no-repeat;
      background-size: 100% 100%;
    }
    &.bottom {
      right: 41rpx;
      bottom: 0;
      width: 37rpx;
      height: 55rpx;
      background: url(./imgs/control-bottom.png) no-repeat;
      background-size: 100% 100%;
    }
    &.left {
      height: 37rpx;
      width: 55rpx;
      right: 63rpx;
      bottom: 41rpx;
      background: url(./imgs/control-left.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
